height
|
С |
|
|
|
|
|||||||||
|
7.0 |
8.0 |
9.0 |
7.0 |
8.0 |
9.6 |
10.0 |
10.0 |
3.1 |
4.0 |
5.0 |
3.0 |
3.6 |
4.0 |
|
Помилка |
Так |
Так |
Так |
Так |
Так |
Так |
Так |
Так |
Так |
Так |
Так |
Так |
Так |
Коротка інформація
|
CSS |
CSS1 |
|
Значення
за умовчанням |
auto |
|
Наслідує |
Ні |
|
Застосовується |
До блокових
елементів |
|
Аналог
HTML |
<table
height=""><img height=""> |
|
Посилання
на специфікацію |
http://www.w
3.org/TR/CSS21/visudet.html#propdef - height |
Опис
Встановлює
висоту блокових або замінюваних елементів (до них, наприклад, відноситься тег
<IMG>). Висота не включає товщину меж навколо елементу, значення
відступів і полів.
Браузери
по-різному реагують на налаштування висоти елементу. Якщо його вміст перевищує
вказану висоту, то Internet Explorer і Opera проігнорують значення властивості
height і автоматично підлаштують висоту під контент. Браузер Netscape (а також
Mozilla і Firefox) залишить висоту елементу незмінній, а вміст
відображатиметься поверх нього. Із-за цієї особливості може вийти накладення
вмісту елементів один на одного, коли елементи в коді HTML вони йдуть
послідовно. Щоб цього не сталося, можна додати overflow: auto до стилю
елементу.
Синтаксис
height:
значення | відсотки | auto | inherit
Значення
Як значення
приймаються будь-які одиниці довжини, прийняті в CSS, - наприклад, піксели
(px), дюйми (in), пункти (pt) та ін. При використанні процентного запису висота
елементу обчислюється залежно від висоти батьківського елементу. Якщо батько
явно не вказаний, то в його якості виступає вікно браузеру. auto встановлює
висоту виходячи з утримуваного елементу
Приклад
HTML 4.0 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
4.01//EN""http ://www.w 3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=windows - 1251">
<title>height</title>
<style type="text/css">
. .layer {
height: 50px; /* Висота блоку */
width: 150px; /* Ширина блоку */
overflow: scroll; /* Додаємо смуги
прокрутки */
background: #fc0; /* Колір фону */
padding: 7px; /* Полів навколо тексту */
border: 1px solid #333; /* Параметрів рамки
*/
}
</style>
</head>
<body>
<div class="layer">
Lorem ipsum dolor sit amet, consectetuer
adipiscing elit, sed diem nonummy nibh
euismod tincidunt ut lacreet dolore magna
aliguam erat volutpat.
</div>
</body>
</html>
Результат цього
прикладу показаний ні мал. 1.
Мал. 1.
Застосування властивості height
Об'єктна модель
[window.]document.getElementById("elementID").style.height
Браузери
Браузер
Internet Explorer 6 некоректно визначає height як min - height. У режимі
несумісності (quirk mode) Internet Explorer до версії 8.0 включно неправильно
обчислює висоту елементу, не додаючи до неї значення відступів, полів і меж.
Internet
Explorer до сьомої версії включно не підтримує значення inherit.
